<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Indent List</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" th:href="@{/css/font.css}">
<link rel="stylesheet" th:href="@{/css/xadmin.css}">
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a>
			<a> <cite>订单信息信息管理</cite></a></span>
		<a class="layui-btn layui-btn-small"
			   style="line-height: 1.6em; margin-top: 3px; float: right"
			   onclick="location.reload()" title="刷新"> <i class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
</div>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">

				<div class="layui-card-header">
					<button class="layui-btn layui-btn-danger" onclick="delAll()">
						<i class="layui-icon"></i>批量删除
					</button>
					<button class="layui-btn"
							onclick="xadmin.open('添加订单信息','/addIndent',550,600,false)">
						<i class="layui-icon"></i>添加
					</button>
				</div>
				<div class="layui-card-body ">
					<table class="layui-table layui-form" lay-filter="table"
						   id="indent">
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	layui.use([ 'form', 'layer', 'table' ], function() {
		const table = layui.table, form = layui.form, $ = layui.$;
		//执行一个laydate实例
		table.render({
			elem : '#indent', //指定元素
			url : '/indent/list',
			toolbar: '#toolbarDemo',
			totalRow: true,
			page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
				//,curr: 5 //设定初始在第 5 页
				,groups: 1 //只显示 1 个连续页码
				,first: false //不显示首页
				,last: false //不显示尾页
			},
			cols : [ [ //表头
				{type:'checkbox'},
				{field : 'indentNo', title : '订单编号', width : 90, sort : true},
				{field: 'userNo', title: '用户编号', width: 90,templet:'<div>{{d.userMessage.userNo}}</div>'},
				{field : 'creatTime', title : '订单创建时间', width : 150, templet: '#date_time'},
				{field : 'payTime', title : '付款时间', width : 150, templet: '#date_time'},
				{field : 'deliveryTime', title : '发货时间', width : 150, templet: '#date_time'},
				{field : 'closingTime', title : '成交时间', width : 150, templet: '#date_time'},
				{field : 'consigneeAddress', title : '收货地址', width : 100, sort : true},
				{field : 'consigneePhone', title : '收货人联系方式', width : 120, sort : true},
				{field: 'paywayNo', title: '支付方式', width: 120,templet:'<div>{{d.payWay.paywayNo}}</div>'},
				{field : 'remark', title : '备注信息', width : 120, sort : true},
				{field: 'logisticsStatusNo', title: '物流状态', width: 120,templet:'<div>{{d.logisticsStatus.logisticsStatusNo}}</div>'},
				{field : 'indentStatus', title : '订单状态', width : 120, sort : true},
				{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}] ]
		});

		//工具栏事件
		table.on('toolbar(table)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：'+ data.length + '个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选': '未全选')
					break;
			}
		});

		//监听行工具事件
		table.on('tool(table)', function(obj){
			var data = obj.data;
			console.log(obj.data)
			switch (obj.event) {
				case 'edit':
					xadmin.open('修改售后信息','/indent/edit_page?indentNo='+obj.data.indentNo,550,400,false)
					break;
				case 'del':
					layer.confirm('真的删除该数据吗?', function(index){
						$.ajax({
							url: '/indent/delete?indentNo='+obj.data.indentNo,
							type: 'post',
							success: function (res) {
								if (res.code === 0) {
									//弹出提示，并在1秒后进行跳转
									layer.alert("删除成功", {
										icon : 6
									}, function() {
										obj.del();
										layer.close(index);
										location.reload();
										return false;
									});
								} else {
									layer.msg("删除失败:" + res.msg);
									return false;
								}
							}
						})
					});
					break;
			}
		});
	});
</script>
<script type="text/html" id="date_time">
	<div>{{layui.util.toDateString(d.creatTime, 'yyyy-MM-dd HH:mm:ss')}}</div>
    <div>{{layui.util.toDateString(d.deliveryTime, 'yyyy-MM-dd HH:mm:ss')}}</div>
	<div>{{layui.util.toDateString(d.deliveryTime, 'yyyy-MM-dd HH:mm:ss')}}</div>
	<div>{{layui.util.toDateString(d.closingTime, 'yyyy-MM-dd HH:mm:ss')}}</div>
</script>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
		<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
		<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>